import React, { Component } from 'react';
import styled, { ThemeProvider } from 'styled-components';

const Wrapper = styled.div`
    /* 应用于Wrapper组件本身和Wrapper组件里的所有html标签 */
    	color: black;
      width: 50vw;
      height: 100vh;

    /* 应用于Wrapper组件里的h3标签 */
    h3 {
    	color: red
    }

    /* 应用于Wrapper组件里的className为blue的html标签 */
    .blue {
    	color: blue
    }
  `

const Box = styled.div`
    color: ${props => props.theme.color};
    border: 10px solid ${props => props.theme.borderColor};
    width: 50vw;
    height: 100vh;
`;

class ThemeReact extends Component {

    render() {
        return (
          <>
            <Wrapper>
                <p>黑色 p 标签 </p>
                <h3>红色 h3 标签</h3> 
                <p className="blue" >蓝色 p 标签</p>
            </Wrapper>

            <div onClick={() => this.changeColor()}>切换颜色</div>
            <ThemeProvider theme={{ color: 'mediumseagreen', borderColor: 'red' }}>
              <Box>I'm mediumseagreen!</Box>
            </ThemeProvider>
          </>
        );
    }
}

export default ThemeReact;